<script setup lang="ts">
import { Menu } from 'ant-design-vue';
import { Analysis, Box, Dashboard, Permissions, System, Workbench } from '@icon-park/vue-next';

defineOptions({
  name: 'AsideMenu',
});

const props = withDefaults(defineProps<MenuProps>(), {
  mode: 'inline',
  collapsed: false,
  location: 'left',
});

interface MenuProps {
  /**
   * 菜单模式
   */
  mode?: 'horizontal' | 'inline' | 'vertical';
  /**
   * 侧边栏菜单是否收起
   */
  collapsed?: boolean;
  /**
   * 位置
   */
  location?: 'left' | 'header';
}

const mode = computed(() => props.mode);

// 当前菜单
const menus = ref<any[]>([]);

function updateMenu() {
  // convertUiMenus()
  menus.value = [
    {
      key: '1',
      icon: () => h(Dashboard),
      label: '控制台',
      title: '控制台',
      children: [
        {
          key: '1-1',
          icon: () => h(Workbench),
          label: '工作台',
          title: '工作台',
        },
        {
          key: '1-2',
          icon: () => h(Analysis),
          label: '分析页',
          title: '分析页',
        },
      ],
    },
    {
      key: '2',
      icon: () => h(System),
      label: '系统管理',
      title: '系统管理',
      children: [
        {
          key: '2-1',
          icon: () => h(Workbench),
          label: '工作台',
          title: '工作台',
        },
        {
          key: '2-2',
          icon: () => h(Workbench),
          label: '分析页',
          title: '分析页',
        },
      ],
    },
    {
      key: '2',
      icon: () => h(Permissions),
      label: '授权管理',
      title: '授权管理',
    },
    {
      key: '3',
      icon: () => h(Box),
      label: '组件示例',
      title: '组件示例',
    },
  ];
}

const selectedKeys = ref([]);
const openKeys = ref([]);

function handleClick(menuInfo: any) {
  console.log('click ', menuInfo);
}

onMounted(() => {
  updateMenu();
});
</script>

<template>
  <Menu
    v-model:openKeys="openKeys"
    v-model:selectedKeys="selectedKeys"
    :mode="mode"
    :items="menus"
    :multiple="false"
    @click="handleClick"
  />
</template>

<style scoped lang="less">

</style>
